<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../Vue.js"></script>
</head>
<body>

<div id="root" :title="aaa">
    {{msg+aaa+bbb}}---{{list}}

    <hr>
    {{msg}}
    <input type="text" v-model:value="msg">

    <button v-on:click="f1">click</button>

    <hr>
    <div v-show="bool">123</div>
    <button @click="f2">show&hide</button>
    <hr>
</div>


<script>
    new Vue({
        el: "#root",
        data: {
            msg: "zs",
            aaa: 'what is a?',
            list: [1, 2, 3],
            bool: true
        },
        methods: {
            f1: function () {
                this.msg = 'ss';
            },
            f2:function() {
                this.bool = this.bool == true ? false : true;
            }
        }
    })
</script>
</body>
</html>